<template>
	<view class="cart-top">
		<navbar>购物车</navbar>
		<view class="cart">
			<view class="labelNav acea-row row-around row-middle" :style='"top: "+navH+"rpx;"'>
				<view class="item">
					<text class="iconfont icon-xuanzhong"></text>
					100%正品保证
				</view>
				<view class="item">
					<text class="iconfont icon-xuanzhong"></text>
					所有商品精挑细选
				</view>
				<view class="item">
					<text class="iconfont icon-xuanzhong"></text>
					售后无忧
				</view>
			</view>
			<view class="nav acea-row row-between-wrapper" :style='"top: "+navHs+"rpx;"'>
				<view><text></text></view>
				<view class="administrate acea-row row-center-wrapper" @click="doManage">{{manage?'关闭':'管理'}}</view>
			</view>
			<view class="noCart" v-if="noCart">
				<view class="pic"><image src="../../static/images/noCart.png" mode=""></image></view>
				<recommend :hotData="hotData"></recommend>
			</view>
			<view class="list" v-else>
				<checkbox-group name="" @change="checkChange">
					<view class="item acea-row row-between-wrapper" v-for="(item,index) in cartList" :key="index">
						<checkbox :value="item.id" :checked="item.check" />
						<navigator url="" class="picTxt acea-row row-between-wrapper">
							<view class="pic"><image :src="item.productInfo.image" mode=""></image></view>
							<view class="text">
								<view class="line1">{{item.productInfo.store_name}}</view>
								<view class="infor line1">属性：{{item.productInfo.attrInfo.suk}}</view>
								<view class="money">￥{{item.truePrice}}</view>
							</view>
							<view class="carnum acea-row row-center-wrapper">
								<u-number-box :index="item.id" v-model="item.cart_num" :min="1" :max="item.trueStock" @change="listChange"></u-number-box>
							</view>
						</navigator>
					</view>
				</checkbox-group>
			</view>
			<view style="height: 120rpx;"></view>
			<view class="footer acea-row row-between-wrapper" v-if="!noCart">
				<checkbox-group @change="checkAll">
					<checkbox :checked="totalCheck" value="0"/>
					<text class="checkAll">全选 ({{totalNum}})</text>
				</checkbox-group>
				<view class="money acea-row row-middle" v-if="!manage">
					<text>￥{{totalPrice}}</text>
					<button type="warn" class="btn" @click="xiadan">立即下单</button>
				</view>
				<view class="button acea-row row-middle" v-else>
					<button type="default" class="btn01" @click="saveAll">收藏</button>
					<button type="default" class="btn02" @click="delCart">删除</button>
				</view>
			</view>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	const app = getApp();
	export default{
		data(){
			return{
				navH: app.globalData.navHeight,
				navHs: "",
				hotData:[],
				cartList:[],
				noCart:true,
				totalCheck:true,
				manage:false,
				num:0,
				totalNum:0,
				totalPrice:0
			}
		},
		onShow() {
			this.navHs = parseInt(app.globalData.navHeight) + 76;
			this.getData();
			this.getHot();
		},
		methods:{
			getData:function(){
				const that = this;
				api.cart.getCartList().then(e=>{
					if(e.status == 200){
						let d = e.data.valid;
						let num = 0;
						for(let i of d){
							num = parseInt(num) + parseInt(i.cart_num) 
							i.check = true
						}
						that.num = num
						that.cartList = d
						if(d.length != 0){
							that.noCart = false
						}else{
							that.noCart = true
						}
						that.toatal()
					}else{
						uni.showToast({
							icon:"none",
							title:e.msg,
							duration:1000
						})
						that.noCart = true
					}
				})
			},
			getHot:function(){
				const that = this;
				api.goods.getHotGoods().then(e=>{
					if(e.status == 200){
						that.hotData = e.data
					}
				})
			},
			doManage:function(){
				this.manage = !this.manage;
			},
			listChange:function(e){
				let cartList = this.cartList;
				api.cart.cartNum(e.index,e.value).then(s=>{
					if(s.status == 200){
						for(let i of cartList){
							if(i.id == e.index){
								i.cart_num = e.value
							}
						}
						this.cartList = cartList;
						this.toatal()
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			},
			checkChange:function(e){
				let c = e.detail.value
				let cartList = this.cartList;
				for(let j of cartList){
					if(c.find(s=>s==j.id)){
						j.check = true
					}else{
						j.check = false
					}
				}
				this.toatal()
			},
			checkAll:function(e){
				let cartList = this.cartList;
				let val = e.detail.value;
				if(JSON.stringify(val) != "[]"){
					for(let i of cartList){
						i.check = true;
					}
				}else{
					for(let i of cartList){
						i.check = false;
					}
					this.totalCheck = false;
				}
				this.cartList = cartList
				this.toatal()
			},
			toatal:function(){
				let cartList = this.cartList;
				let loop = 0;
				let totalNum = 0;
				let totalPrice = 0;
				for(let i of cartList){
					if(i.check){
						totalNum = parseInt(totalNum)  + parseInt(i.cart_num);
						totalPrice = parseFloat(totalPrice) + i.cart_num*i.truePrice
						loop++;
					}
				}
				this.totalNum = totalNum;
				this.totalPrice = totalPrice.toFixed(2);
				if(loop==this.cartList.length){
					this.totalCheck = true
				}else{	
					this.totalCheck = false
				}
			},
			saveAll:function(){
				const that = this;
				uni.showModal({
					title:"确定收藏?",
					success(e) {
						if(e.confirm){
							let g = that.getChecked()
							if(g.id != ""){
								api.collect.collectAll(g.id).then(o=>{
									if(o.status == 200){
										uni.showToast({
											title:"收藏成功",
											icon:"success",
											duration:800
										})
										that.getData()
									}else{
										uni.showToast({
											title:o.msg,
											icon:"none",
											duration:1000
										})
									}
								})
							}else{
								uni.showToast({
									title:"选择要收藏的对象",
									icon:"none",
									duration:800
								})	
							}
						}
					}
				})
			},
			delCart:function(){
				const that = this;
				uni.showModal({
					title:"确定删除?",
					success:function(e){
						if(e.confirm){
							let g = that.getChecked()
							if(g.ids != ""){
								api.cart.delCart(g.ids).then(o=>{
									if(o.status == 200){
										uni.showToast({
											title:"删除成功",
											icon:"success",
											duration:800
										})
										that.getData()
									}else{
										uni.showToast({
											title:o.msg,
											icon:"none",
											duration:1000
										})
									}
								})
							}else{
								uni.showToast({
									title:"选择要删除的对象",
									icon:"none",
									duration:800
								})	
							}
						}
					}
				})
			},
			getChecked:function(){
				let cartList = this.cartList;
				let arr = [];
				let ids = ""; // 购物车id字符串
				let id = ""; // 商品id字符串
				console.log(cartList)
				for(let i of cartList){
					if(i.check){
						arr.push(i);
						ids += i.id + ",";
						id += i.productInfo.id + ",";
					}
				}
				ids = ids.substring(0,ids.length-1)
				id = id.substring(0,id.length-1)
				return({arr,ids,id});
			},
			xiadan:function(){
				let g = this.getChecked()
				uni.navigateTo({
					url:"/pages/pack/order_confirm/order_confirm?id=" + g.ids
				})
			}
		}
	}
</script>

<style>
	.cart-top{
		background-color: #F5F5F5;
		min-height: 100vh;
	}
	.cart .labelNav{
		height: 76rpx;
		padding: 0 30rpx;
		font-size: 22rpx;
		color: #8c8c8c;
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f5f5;
		z-index: 5;
	}
	.cart .labelNav .item text{
		font-size: 25rpx;
		margin-right: 10rpx;
	}
	.cart .nav{
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #282828;
		position: fixed;
		left: 0;
		z-index: 5;
	}
	.cart .nav view text{
		color: #fc4141 !important;
		margin-left: 10rpx;
	}
	.cart .noCart{
		margin-top: 171rpx;
		background-color: #fff;
		padding-top: 0.1rpx;
	}
	.cart .noCart .pic{
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}
	.cart .nav .administrate{
		font-size: 26rpx;
		color: #282828;
		width: 110rpx;
		height: 46rpx;
		border-radius: 6rpx;
		border: 1px solid #868686;
	}
	.cart .list{
		margin-top: 171rpx;
	}
	.cart .list .item{
		padding: 25rpx 30rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}
	.cart .list .item .picTxt{
		width: 627rpx;
		position: relative;
	}
	.cart .list .item .picTxt .pic{
		width: 160rpx;
		height: 160rpx;
	}
	.cart .list .item .picTxt .text{
		width: 444rpx;
		font-size: 28rpx;
		color: #282828;
	}
	.cart .list .item .picTxt .text .infor{
		font-size: 24rpx;
		color: #868686;
		margin-top: 16rpx;
	}
	.cart .list .item .picTxt .text .money{
		font-size: 32rpx;
		color: #282828;
		margin-top: 28rpx;
	}
	.cart .list .item .picTxt .carnum{
		height: 47rpx;
		position: absolute;
		bottom: 7rpx;
		right: 0;
		z-index: 5;
	}
	.cart .footer{
		width: 100%;
		height: 96rpx;
		background-color: #fafafa;
		position: fixed;
		bottom: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
	}
	.cart .footer .checkAll{
		font-size: 28rpx;
		color: #282828;
		margin-left: 16rpx;
	}
	.cart .footer .money{
		font-size: 30rpx;
	}
	.cart .footer .money text{
		color: #fc4141!important;
	}
	.cart .footer .money .btn{
		color: #fff;
		font-size: 30rpx;
		width: 226rpx;
		height: 70rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 22rpx;
	}
	.cart .footer .button .btn01{
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ff3700!important;
		border: 1px solid #ff3700!important;
	}
	.cart .footer .button .btn02{
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 17rpx;
	}
</style>
